import { LocalizedLabel } from "../Language/LocalizedLabel";

const { ccclass, property } = cc._decorator;

let ActionTime = 0.1 // 下拉菜单展开事件，秒

/**
 * 下拉菜单组件
 */
@ccclass
export class DropMenuCpnt extends cc.Component {
    @property(cc.Node)
    ndBtnSelect: cc.Node = null
    @property(LocalizedLabel)
    labSelected: LocalizedLabel = null
    @property(cc.Node)
    ndMask: cc.Node = null
    @property(cc.ScrollView)
    svMenu: cc.ScrollView = null
    
    ndSvMenu: cc.Node;
    ndSvCtn: cc.Node;
    lyotSvCtn: cc.Layout;
    ndMenuItem: cc.Node;
    private _acting: boolean;

    onLoad() {
        cc.log(`${cc.js.getClassName(this)} onLoad`)

        this.ndSvMenu = this.svMenu.node
        this.ndSvCtn = this.svMenu.content
        this.lyotSvCtn = this.ndSvCtn.getComponent(cc.Layout)
        this.ndMenuItem = this.ndSvCtn.children[0]
        this.ndMask.height = 0
        this._acting = false
        this.ndMenuItem.parent = null
        this.ndBtnSelect.on(cc.Node.EventType.TOUCH_END, (event: cc.Event) => {
            cc.log(`${cc.js.getClassName(this)} onBtnSelect`)

            this._showMenu()
        }, this)

        cc.log(this.ndSvCtn)
    }

    // ====================================================================================
    // ===================================== 内部接口 ======================================
    // ====================================================================================

    /**
     * 显示菜单选项
     */
    private _showMenu() {
        cc.log(`${cc.js.getClassName(this)} _showMenu`)

        if (!this._acting) {
            this._acting = true
            this.ndMask.height = this.ndBtnSelect.height
            cc.tween(this.ndMask)
                .to(ActionTime, { height: this.ndSvCtn.height })
                .call(() => {
                    this._acting = false
                    this.ndMask.height = this.ndSvCtn.height
                })
                .start()
        }
    }

    /**
     * 隐藏菜单选项
     */
    private _hideMenu() {
        cc.log(`${cc.js.getClassName(this)} _hideMenu`)

        if (!this._acting) {
            this._acting = true
            this.ndMask.height = this.ndSvCtn.height
            cc.tween(this.ndMask)
                .to(ActionTime, { height: this.ndBtnSelect.height })
                .call(() => {
                    this._acting = false
                    this.ndMask.height = 0
                })
                .start()
        }
    }

    // ====================================================================================
    // ===================================== 外部接口 ======================================
    // ====================================================================================

    /**
     * 初始化下拉菜单
     * @param infoList 选项信息
     * @param selectCall 点击回调
     * @param resetPosAvatar 是否重置到顶端，默认否
     */
    init(infoList: { str: string }[], selectCall: (index: number) => void, resetPosAvatar = false) {
        cc.log(`${cc.js.getClassName(this)} init infoList = ${infoList} resetPosAvatar = ${resetPosAvatar}`)

        for (let index = 0; index < infoList.length; index++) {
            let item = this.ndSvCtn.children[index] || cc.instantiate(this.ndMenuItem),
                info = infoList[index]
            // info = {
            //     str: String,
            // }
            !item.parent && this.ndSvCtn.addChild(item)
            let lab = cc.find(`lab`, item).getComponent(LocalizedLabel)
            if (index === 0) {
                this.labSelected.textKey = info.str
            }
            lab.textKey = info.str
            item.targetOff(this)
            item.on(cc.Node.EventType.TOUCH_END, (event: cc.Event) => {
                // cc.log(`${cc.js.getClassName(this)} onSelect`)

                this.labSelected.textKey = lab.textKey
                this._hideMenu()
                selectCall && selectCall(index)
            }, this)
        }
        for (let index = infoList.length; index < this.ndSvCtn.children.length; index++) {
            let item = this.ndSvCtn.children[index]
            item.destroy()
        }
        this.lyotSvCtn.updateLayout()
        this.ndSvMenu.height = this.ndSvCtn.height
    }

    /**
     * 获取选项节点
     */
    getChildren() {
        return this.ndSvCtn.children
    }
}
